<template>
  <!-- 评论展示，每一条可以点击进入详情页，跳转时带参数blog的标题-->
  <div class="show-comments">
    <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
     <li v-for="comment in comments" class="infinite-list-item every-com" v-bind:key="comment"><span class="commentator">{{comment.commentator}}  评论了你的博文</span> <span class="comment-content">{{comment.content}}</span> <router-link to="{ path:'/404', query: { id: comment.title}}" class="commento" qu>{{comment.title}}</router-link></li>
    </ul>
  </div>
</template>

<script>
export default{
  name: 'commentdetails',
  data () {
    return {
      comments: [

      ]
    }
  },
  methods: {

  },
  mounted () {
    this.$http.post('http://localhost:8081/perInfo/getComments', {
      myEmail: window.sessionStorage.getItem('author')
    }).then(res => {
      console.log(res)
      this.comments = res.data
    })
  }
}
</script>

<style>
  .show-comments{
    height: 420px;
  }
  .every-com{
    list-style: none;
    border-bottom: #D3D3D3 1px solid;
  }
  .commentator{
    color: gray;
    display: block;
    text-align: left;
    margin-bottom: 10px;
    font-family: 楷书;
    font-size: 13px;
  }
  .comment-content{
    display: block;
    text-align: left;
    font-family: 宋体;
    font-weight: bold;
    margin-bottom: 18px;
  }
  .commento{
    color: gray;
    text-decoration: none;
    text-align: left;
    display: block;
    font-family: 楷书;
    margin-bottom: 9px;
    font-size: 14px;
  }
</style>
